<template>
  <div class="notice-filter">
    <el-form 
      :model="localFilters" 
      inline 
      class="filter-form"
      @submit.prevent="handleSearch"
    >
      <el-form-item label="标题搜索">
        <el-input
          v-model="localFilters.title"
          placeholder="请输入公告标题关键词"
          clearable
          style="width: 200px"
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      
      <el-form-item label="公告类型">
        <el-select
          v-model="localFilters.noticeType"
          placeholder="选择公告类型"
          clearable
          style="width: 150px"
        >
          <el-option label="全部" value="" />
          <el-option label="重要通知" value="important" />
          <el-option label="学术公告" value="academic" />
          <el-option label="生活通知" value="life" />
          <el-option label="系统通知" value="system" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="发布时间">
        <el-date-picker
          v-model="localFilters.publishTime"
          type="date"
          placeholder="选择发布时间"
          style="width: 180px"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          clearable
        />
      </el-form-item>
      
      <el-form-item>
        <el-button 
          type="primary" 
          :icon="Search" 
          @click="handleSearch"
          :loading="searching"
        >
          搜索
        </el-button>
        <el-button 
          :icon="RefreshLeft" 
          @click="handleClearFilters"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Search, RefreshLeft } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  filters: {
    type: Object,
    default: () => ({
      title: '',
      noticeType: '',
      publishTime: null
    })
  }
})

// Emits
const emit = defineEmits(['filter-change', 'clear-filters', 'search'])

// 本地筛选条件
const localFilters = ref({ ...props.filters })
const searching = ref(false)

// 监听props变化，同步到本地状态
watch(() => props.filters, (newFilters) => {
  localFilters.value = { ...newFilters }
}, { deep: true })

// 监听本地筛选条件变化，实时更新
watch(localFilters, (newFilters) => {
  emit('filter-change', { ...newFilters })
}, { deep: true })

// 执行搜索
const handleSearch = async () => {
  searching.value = true
  try {
    // 构建搜索参数，过滤空值
    const searchParams = {}
    if (localFilters.value.title?.trim()) {
      searchParams.title = localFilters.value.title.trim()
    }
    if (localFilters.value.noticeType) {
      searchParams.noticeType = localFilters.value.noticeType
    }
    if (localFilters.value.publishTime) {
      searchParams.publishTime = localFilters.value.publishTime
    }
    
    emit('search', searchParams)
  } finally {
    searching.value = false
  }
}

// 清空筛选条件
const handleClearFilters = () => {
  localFilters.value = {
    title: '',
    noticeType: '',
    publishTime: null
  }
  emit('clear-filters')
}
</script>

<style scoped>
.notice-filter {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.filter-form {
  margin: 0;
}

.filter-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 20px;
}

.filter-form :deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

@media (max-width: 768px) {
  .filter-form {
    display: block;
  }
  
  .filter-form :deep(.el-form-item) {
    display: block;
    margin-bottom: 15px;
    margin-right: 0;
  }
  
  .filter-form :deep(.el-input),
  .filter-form :deep(.el-select),
  .filter-form :deep(.el-date-editor) {
    width: 100% !important;
  }
}
</style>